<script setup lang="ts">
import { toRef, ref, reactive } from 'vue'
import useAppStore from '@/store'
// import { onLoad } from '@dcloudio/uni-app'
// import FormData from '@/utils/formData'

import { useUserStore} from '@/store/user'
import { quit,setmobile } from '@/apis/my'
const userStore = useUserStore()


const appStore = useAppStore()
appStore.reset()
const top = toRef(appStore, 'top')

const goBack = () => {
	uni.navigateBack()
}
// ----------自己的代码-------------
// 得到 pinia 的 store
// const userStore = useUserStore()
// 定义个人信息的数据
const profileObj = ref<any>({})

const onChooseAvatar = async (e) => {
  startUpload(e.detail.avatarUrl)
}

const startUpload = (filePath: string) => {
  // 2. 将选中的图片提交到服务器
  uni.showLoading({
    title: '请稍候...'
  })
 
}

 const show = ref(false)
 const mobile = ref(userStore.user.mobile)
 const data = reactive({
	 ordPwd:'',
	 newPwd:'',
	 // mobile:userStore.user.mobile
 })
 function password(){
	 if(data.ordPwd.length < 4||data.ordPwd.length >14){
		 uni.showToast({
		 	title: '旧密码格式错误',
		 	duration: 2000
		 });
		 return
	 }
	 else if(data.newPwd.length < 4||data.newPwd.length >14){
		 console.log(data.newPwd.length)
		 uni.showToast({
		 	title: '新密码格式错误',
		 	duration: 2000
		 });
		 return
	 }
	 setmobile(data).then(()=>{
				uni.showToast({
					title: '更改完成',
					duration: 2000
				});
			quitLogin()
		})
 }
 function quitLogin(){
	 quit().then(()=>{
		 userStore.setToken(null)
		 userStore.setRefreshToken(null)
		 uni.reLaunch({
		 	url:"/pages/login/index"
		 })
	 })
 }
</script>

<template>
  <view class="viewport">
    <view class="navbar" style=" padding-top;: 50rpx ">
      <view class="icon" @click="goBack"/>
      <view class="title">个人信息</view>
    </view>
    <scroll-view scroll-y>
      <!-- 头像 -->
      <view class="avatar">
        <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image
            :src="profileObj.avatar || '/static/touxiang.svg'"
            mode="aspectFill" />
          <text>点击修改头像</text>
        </button>
      </view>
      <!-- 用户信息 -->
      <view class="form">
        <view class="form-item">
          <text class="label">账号</text>
          <text>{{ userStore.user.mobile }}</text>
        </view>
        <view class="form-item">
          <text class="label">昵称</text>
		   <text>{{ userStore.user.name }}</text>
          <!-- <input
            v-model="profileObj.nickname"
            type="nickname"
            @blur="blurname" /> -->
        </view>
        <view class="form-item">
          <text class="label">姓名</text>
		   <text>{{ userStore.user.contact }}</text>
          <!-- <input v-model="profileObj.realName" /> -->
        </view>
        <view class="form-item">
          <text class="label">手机号</text>
          <input v-model="mobile"/>
          <!-- <text>{{ profileObj.mobile }}</text> -->
          <button
			@click="setmobile"
            class="phonebutton">
            改绑手机号
          </button>
        </view>
		<view class="form-item">
		  <text class="label">密码</text>
		  <input :disabled="true" type="safe-password" />
		  <!-- <text>{{ profileObj.mobile }}</text> -->
		  <button
		  class="phonebutton"
		  @click="show=true"
		  >
		    更改密码
		  </button>
		</view>
		<u-popup :show="show" @close="show=false" :closeable="true" :customStyle="{padding: '40rpx'}" safeAreaInsetBottom>
			<view style="height: 400rpx; margin-top: 50rpx;">
				<view class="">
					<view class="form-item">
					  <text class="label">旧密码</text>
					  <input type="password" v-model="data.ordPwd" placeholder="请输入旧密码"/>
					</view>
					<view class="form-item">
					  <text class="label">新密码</text>
					  <input type="password" v-model="data.newPwd" placeholder="请输入4-16位密码"/>
					</view>
					<view class="button" @click="password">保 存</view>
				</view>
			</view>
		</u-popup>
      </view>
      <!-- 提交按钮 -->
      <view @click="quitLogin" class="button">退出登录</view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
	.icon{
		position: relative;
	}
.icon::before{
	 content: "";
	 position: absolute;
	 left: 20rpx;
	 top: 80rpx;
	 width: 50rpx;
	 height: 50rpx;
	 background: url('../../static/img/左箭头 (1).png') no-repeat;
	 background-size: cover;
}
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url("../../static/img/order_bg.png");
  background-size: auto 392rpx;
  background-repeat: no-repeat;
}

.navbar {
  .title {
    height: 140rpx;
    line-height: 180rpx;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    margin-top: 10rpx;
  }
}
.avatar {
  text-align: center;
  padding: 0rpx 40rpx;
  button {
    background: #00000000;
    margin-top: 0rpx;
  }
  image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
  }
  text {
    display: block;
    padding-top: 20rpx;
    line-height: 1;
    font-size: 26rpx;
    color: #fff;
  }
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    .label {
      width: 180rpx;
      color: #333;
    }

    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    .radio {
      display: inline-block;
      height: 46rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }

    radio {
      transform: scale(0.7) translateY(-2px);
    }
    picker {
      flex: 1;
    }
  }
  // .form-item:last-child {
  //   border: none;
  // }
  .phonebutton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12rpx;
    margin-top: -14rpx;
    width: 140rpx;
    height: 70rpx;
    padding: 8rpx;
    font-size: 24rpx;
    border-radius: 10rpx;
    color: #fff;
    background-color: #289cbb;
  }
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #00b4ff;
}
</style>